<template>
  <section style="margin: 15px 0;">
    <el-form :inline="true">
      <el-form-item label="手机或者姓名" >
        <el-row :gutter="10" >
          <el-col :span="14" >
            <el-input size="mini" v-model="keyword" placeholder="手机或者姓名" @keydown.native.prevent.enter="searchCustomerBtn"></el-input>
          </el-col>
          <el-col :span="5" >
            <el-button type="primary" @click="searchCustomerBtn" size="mini">查询</el-button>
          </el-col>
          <el-col :span="5" style="margin-left: 0px">
            <el-button type="text" style="font-size: 12px;line-height: 12px" @click="addCustomerBtn">添加新用户</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="createCustomerDialog">
      <create-customer-dialog v-on:confirm="confirmDialogBtn" :customer="currCustomer"></create-customer-dialog>
    </el-dialog>
    <el-table :data="customerList" style="width:100%;margin-top:20px" stripe v-if="customerList" border>
      <el-table-column type="index" label="序号"/>
      <!--<el-table-column prop="id" label="ID" width="80"/>-->
      <el-table-column prop="name" label="姓名" min-width="80px">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
          <span  v-if="!scope.row.edit">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="50px">
        <template slot-scope="scope">
          <el-row v-if="scope.row.edit">
            <el-radio v-model="scope.row.gender" :label="1">男</el-radio>
            <el-radio v-model="scope.row.gender" :label="2">女</el-radio>
          </el-row>
          <el-row v-else>
            <span v-if="scope.row.gender === 1">男</span>
            <span v-if="scope.row.gender === 2">女</span>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" min-width="100px">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.birthday"></el-input>
          <span  v-if="!scope.row.edit">{{scope.row.birthday}}</span>
        </template>
      </el-table-column>
      <el-table-column label="电话" min-width="120px">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.phone"></el-input>
          <span  v-if="!scope.row.edit">{{scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="婚姻" width="50px">
        <template slot-scope="scope">
          <el-switch v-if="scope.row.edit" size="mini" v-model="scope.row.isMarried" active-text="已婚" inactive-text="未婚"/>
          <span v-else>{{scope.row.isMarried?'已婚':'未婚'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮件" min-width="200px">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.email"></el-input>
          <span  v-if="!scope.row.edit">{{scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="150px">
        <template slot-scope="scope">
          <el-row v-if="member">
            <i class="el-icon-check" style="color: green" v-if="scope.row.load"></i>
            <el-button size="mini" v-else type="text" @click="loadCustomerBtn(scope.row)">导入</el-button>
          </el-row>
          <el-row v-else>
            <el-button type="primary" @click='confirm(scope.row)' size="mini">编辑</el-button>
            <el-button type="danger" @click='del(scope)' size="mini">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;"
                   background
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import createCustomerDialog from "./createCustomerDialog";
  export default {
    name: "index",
    props:['member'],
    components: {createCustomerDialog},
    data(){
      return {
        keyword:null,
        customerList:null,
        totalPage:0,
        createCustomerDialog:false,
        currCustomer:null
      }
    },
    created(){
      console.log(this.member)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.getCustomerList(val-1,this.keyword)
      },
      addCustomerBtn() {
        this.currCustomer={}
        this.createCustomerDialog = true
      },
      searchCustomerBtn(){
        //搜索用户列表，用key
        this.getCustomerList('',this.keyword)
      },
      getCustomerList(pageNo,keywords){
        console.log(keywords)
        this.fetch({name:"getCustomerList",data:{keywords,page:pageNo?pageNo:0}})
          .then((res)=>{
            console.log('用户列表——————',res)
            this.customerList = res.content
            this.totalPage=res.totalPages
            if(this.member){
              this.filterList()
            }
          })
          .catch((err)=>{
            console.log(err)
            this.$message({type:'error',message:"服务器错误"})
          })
      },
      filterList(){
        let array=this.member.customers
        this.customerList.forEach(c=>{
          Vue.set(c,'load',false)
          array.forEach(a=>{
            if(a.id === c.id){
              c.load=true
            }
          })
        })
      },
      confirm(row){
        this.currCustomer=row
        this.createCustomerDialog = true
      },
      del(scope){//删除按钮
        this.$confirm('确认删除？')
          .then(()=> {
            this.$message({ type: 'info', message: '用户删除暂无' })
          })
          .catch(() => {
            this.$message({ type: 'info', message: '已取消删除' })
          })
      },
      confirmDialogBtn(e){
        console.log(e)
        if(e.id){
          this.updateCustomer(e)
        }else {
          this.createCustomerByAdmin()
        }
      },
      updateCustomer(row){
        console.log(row)
        this.fetch({name:"updateCustomer",data:{...row},method:'post'})
          .then(res=>{
            this.$message({type:'success',message:'更新成功'})
            this.getCustomerList(0,this.keyword)
            this.createCustomerDialog = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      createCustomerByAdmin(data){
        this.fetch({name:"createCustomerByAdmin",data})
          .then(res=>{
            //创建成功，关掉对话框
            this.$message({type:'sucess',message:'创建成功'})
            this.getCustomerList(0,this.keyword)
            this.createCustomerDialog = false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      loadCustomerBtn(row){
        console.log(row)
        if(!row.phone){
          this.$alert('请通过‘共享’功能绑定。', '该用户未设置手机', {
            confirmButtonText: '确定'
          })
          return
        }
        this.$emit('confirm',row)
      }
    }
  }
</script>

<style scoped>

</style>
